<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../src/assets/echarts/echarts.js"></script>
</head>

<body>
    <div id="main" style="width: 100%;height:400px;"></div>
    <script>
        var myChart = echarts.init(document.getElementById('main'));
        function randomData() {
            now = new Date(+now + oneDay);
            value = value + Math.random() * 21 - 10;
            return {
                name: now.toString(),
                value: [
                    [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
                    Math.round(value)
                ]
            };
        }
        let data = [];
        let now = new Date(2022, 3, 26);
        let oneDay = 24 * 3600 * 1000;
        let value = Math.random() * 100;
        for (var i = 0; i < 100; i++) {
            data.push(randomData());
        }
        option = {
            title: {
                text: '实时访问量监控'
            },
            tooltip: {
                trigger: 'axis',
                formatter: function (params) {
                    params = params[0];
                    var date = new Date(params.name);
                    return (
                        date.getDate() +
                        '/' +
                        (date.getMonth() + 1) +
                        '/' +
                        date.getFullYear() +
                        ' : ' +
                        params.value[1]
                    );
                },
                axisPointer: {
                    animation: false
                }
            },
            xAxis: {
                type: 'time',
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                splitLine: {
                    show: false
                },
                
                
            },
            series: [
                {
                    name: 'Fake Data',
                    type: 'line',
                    showSymbol: false,
                    data: data
                }
            ]
        };
        setInterval(function () {
            for (var i = 0; i < 5; i++) {
                data.shift();
                data.push(randomData());
            }
            myChart.setOption({
                series: [
                    {
                        data: data
                    }
                ]
            });
        }, 1000);
        myChart.setOption(option);
    </script>

</body>

</html>